<template>
  <div class="left" >
    <video class="video-i" ref='audio' controls="controls"></video>
    <!-- http://res.pipup.me/video/disinfect.mp4 -->
  </div>
  <div class="video-list">
    <div class="txt1">{{video_info.position_name}} {{video_info.title}}</div>
  </div>
</template>
<script>
import navbar from '../../components/navbar/index.vue'
import { computed, defineComponent,ref,toRefs,onMounted,reactive,watch,getCurrentInstance } from 'vue'
export default defineComponent({
  components:{
    navbar
  },
  setup(props) {
    const { proxy } = getCurrentInstance()
    const data = reactive({
      video_info:{}
    })
    onMounted( async ()=>{
      const res = await proxy.$get("v1/video/detail", { id: proxy.$route.query.id })
      console.log(res)
      data.video_info = res.data
      proxy.$refs.audio.src = res.data.url
    })
    const submit = async () => {

    }
    return{
      ...toRefs(data),
      submit
    }
  }
})
</script>
<style lang="less" scoped>
.home{
  background:rgba(248,248,248,1);min-height: calc(100vh);
  overflow: hidden;
  background-size: cover;
  position: relative;
}
.video-i{
  width: 100%;
  height: 100%;
}
.comment{
  padding-top: 40px;
  font-size: .24rem;
}
.btn-episode{
  font-size: .14rem;
  border: 1px solid #999999;
  border-radius: 10px;
  padding: 10px;
  margin-left: 20px;
  margin-top: 20px;
}
.video-list{
  padding: 10px;
}
.txt1{
  font-size: .18rem;
  color: #222222;
  padding: 10px 0;
}
.txt2{
  padding: 10px 0;
  font-size: .12rem;
  color: #555555;
}
.video{
  margin-right: 20px;
  width: 250px;
  height: 250px;
}
.video-item{
  .c2{
    padding-top:20px;
    padding-bottom: 20px;
    font-size: .2rem;
  }
  .c9{
    
    padding-top:20px;
    font-size: .14rem;
  }
  // width: 49%;
  padding-bottom: 10px;
}
</style>
